import dayjs from "dayjs";
import { getChartListColor } from "@/utils/color";
import { getRandomArray } from "@/utils/charts";

/** 首页 dashboard 折线图 */
export function constructInitDashboardDataset(type: string) {
  const dateArray: Array<string> = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
  const datasetAxis = {
    xAxis: {
      type: "category",
      show: false,
      data: dateArray
    },
    yAxis: {
      show: false,
      type: "value"
    },
    grid: {
      top: 0,
      left: 0,
      right: 0,
      bottom: 0
    }
  };

  if (type === "line") {
    const lineDataset = {
      ...datasetAxis,
      color: ["#fff"],
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type,
          showSymbol: true,
          symbol: "circle",
          symbolSize: 0,
          markPoint: {
            data: [
              { type: "max", name: "最大值" },
              { type: "min", name: "最小值" }
            ]
          },
          itemStyle: {
            normal: {
              lineStyle: {
                width: 2
              }
            }
          }
        }
      ]
    };
    return lineDataset;
  }
  if (type === "bar") {
    const barDataset = {
      ...datasetAxis,
      color: getChartListColor(),
      series: [
        {
          data: [
            100,
            130,
            184,
            218,
            {
              value: 135,
              itemStyle: {
                opacity: 0.2
              }
            },
            {
              value: 118,
              itemStyle: {
                opacity: 0.2
              }
            },
            {
              value: 60,
              itemStyle: {
                opacity: 0.2
              }
            }
          ],
          type,
          barWidth: 9
        }
      ]
    };
    return barDataset;
  }
}

/** 柱状图数据源 */
export function constructInitDataset({
  dateTime = [],
  placeholderColor,
  borderColor
}: { dateTime: Array<string> } & Record<string, string>) {
  const divideNum = 10;
  const timeArray = [];
  const inArray = [];
  const outArray = [];
  for (let i = 0; i < divideNum; i++) {
    if (dateTime.length > 0) {
      const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
      const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
      timeArray.push(dayjs(enhandTime).format("MM-DD"));
    } else {
      timeArray.push(
        dayjs()
          .subtract(divideNum - i, "day")
          .format("MM-DD")
      );
    }

    inArray.push(getRandomArray().toString());
    outArray.push(getRandomArray().toString());
  }
  const dataset = {
    color: getChartListColor(),
    tooltip: {
      trigger: "item"
    },
    xAxis: {
      type: "category",
      data: timeArray,
      axisLabel: {
        color: placeholderColor
      },
      axisLine: {
        lineStyle: {
          color: borderColor,
          width: 1
        }
      }
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: placeholderColor
      },
      splitLine: {
        lineStyle: {
          color: borderColor
        }
      }
    },
    grid: {
      top: "5%",
      left: "25px",
      right: 0,
      bottom: "60px"
    },
    legend: {
      icon: "rect",
      itemWidth: 12,
      itemHeight: 4,
      itemGap: 48,
      textStyle: {
        fontSize: 12,
        color: placeholderColor
      },
      left: "center",
      bottom: "0",
      orient: "horizontal",
      data: ["本月", "上月"]
    },
    series: [
      {
        name: "本月",
        data: outArray,
        type: "bar"
      },
      {
        name: "上月",
        data: inArray,
        type: "bar"
      }
    ]
  };

  return dataset;
}

export function getLineChartDataSet({
  dateTime = [],
  placeholderColor,
  borderColor
}: { dateTime?: Array<string> } & Record<string, string>) {
  const divideNum = 10;
  const timeArray = [];
  const inArray = [];
  const outArray = [];
  for (let i = 0; i < divideNum; i++) {
    if (dateTime.length > 0) {
      const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
      const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
      timeArray.push(dayjs(enhandTime).format("MM-DD"));
    } else {
      timeArray.push(
        dayjs()
          .subtract(divideNum - i, "day")
          .format("MM-DD")
      );
    }

    inArray.push(getRandomArray().toString());
    outArray.push(getRandomArray().toString());
  }

  const dataSet = {
    color: getChartListColor(),
    tooltip: {
      trigger: "item"
    },
    grid: {
      left: "0",
      right: "20px",
      top: "5px",
      bottom: "36px",
      containLabel: true
    },
    legend: {
      left: "center",
      bottom: "0",
      orient: "horizontal", // legend 横向布局。
      data: ["本月", "上月"],
      textStyle: {
        fontSize: 12,
        color: placeholderColor
      }
    },
    xAxis: {
      type: "category",
      data: timeArray,
      boundaryGap: false,
      axisLabel: {
        color: placeholderColor
      },
      axisLine: {
        lineStyle: {
          width: 1
        }
      }
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: placeholderColor
      },
      splitLine: {
        lineStyle: {
          color: borderColor
        }
      }
    },
    series: [
      {
        name: "本月",
        data: outArray,
        type: "line",
        smooth: false,
        showSymbol: true,
        symbol: "circle",
        symbolSize: 8,
        itemStyle: {
          normal: {
            borderColor,
            borderWidth: 1
          }
        },
        areaStyle: {
          normal: {
            opacity: 0.1
          }
        }
      },
      {
        name: "上月",
        data: inArray,
        type: "line",
        smooth: false,
        showSymbol: true,
        symbol: "circle",
        symbolSize: 8,
        itemStyle: {
          normal: {
            borderColor,
            borderWidth: 1
          }
        }
      }
    ]
  };
  return dataSet;
}

/**
 * 获取表行数据
 *
 * @export
 * @param {string} productName
 * @param {number} divideNum
 */
export function getSelftItemList(productName: string, divideNum: number): string[] {
  const productArray: string[] = [productName];
  for (let i = 0; i < divideNum; i++) {
    productArray.push(getRandomArray(100 * i).toString());
  }

  return productArray;
}

/**
 * 散点图数据
 *
 * @export
 * @returns {any[]}
 */
export function getScatterDataSet({
  dateTime = [],
  placeholderColor,
  borderColor
}: { dateTime?: Array<string> } & Record<string, string>): any {
  const divideNum = 40;
  const timeArray = [];
  const inArray = [];
  const outArray = [];
  for (let i = 0; i < divideNum; i++) {
    // const [timeArray, inArray, outArray] = dataset;
    if (dateTime.length > 0) {
      const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
      const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
      timeArray.push(dayjs(enhandTime).format("MM-DD"));
    } else {
      timeArray.push(
        dayjs()
          .subtract(divideNum - i, "day")
          .format("MM-DD")
      );
    }

    inArray.push(getRandomArray().toString());
    outArray.push(getRandomArray().toString());
  }

  return {
    color: getChartListColor(),
    xAxis: {
      data: timeArray,
      axisLabel: {
        color: placeholderColor
      },
      splitLine: { show: false },
      axisLine: {
        lineStyle: {
          color: borderColor,
          width: 1
        }
      }
    },
    yAxis: {
      type: "value",
      // splitLine: { show: false},
      axisLabel: {
        color: placeholderColor
      },
      nameTextStyle: {
        padding: [0, 0, 0, 60]
      },
      axisTick: {
        show: false,
        axisLine: {
          show: false
        }
      },
      axisLine: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: borderColor
        }
      }
    },
    tooltip: {
      trigger: "item"
    },
    grid: {
      top: "5px",
      left: "25px",
      right: "5px",
      bottom: "60px"
    },
    legend: {
      left: "center",
      bottom: "0",
      orient: "horizontal", // legend 横向布局。
      data: ["按摩仪", "咖啡机"],
      itemHeight: 8,
      itemWidth: 8,
      textStyle: {
        fontSize: 12,
        color: placeholderColor
      }
    },
    series: [
      {
        name: "按摩仪",
        symbolSize: 10,
        data: outArray.reverse(),
        type: "scatter"
      },
      {
        name: "咖啡机",
        symbolSize: 10,
        data: inArray.concat(inArray.reverse()),
        type: "scatter"
      }
    ]
  };
}

/**
 * 获域图数据结构
 *
 * @export
 * @returns {any[]}
 */
export function getAreaChartDataSet(): any {
  const xAxisData = [];
  const data1 = [];
  const data2 = [];
  for (let i = 0; i < 50; i++) {
    xAxisData.push(`${i}`);
    data1.push((getRandomArray() * Math.sin(i / 5) * (i / 5 - 5) + i / 6) * 2);
    data2.push((getRandomArray() * Math.cos(i / 5) * (i / 5 - 5) + i / 6) * 2);
  }

  return {
    color: getChartListColor(),
    // title: {
    //   text: '柱状图动画延迟',
    // },
    legend: {
      left: "center",
      bottom: "5%",
      orient: "horizontal",
      data: ["测试", "上线"]
    },
    tooltip: {
      trigger: "item"
    },
    xAxis: {
      data: xAxisData,
      splitLine: {
        show: false
      }
    },
    yAxis: {},
    series: [
      {
        name: "测试",
        type: "bar",
        data: data1,
        emphasis: {
          focus: "series"
        },
        animationDelay(idx: number) {
          return idx * 10;
        }
      },
      {
        name: "上线",
        type: "bar",
        data: data2,
        emphasis: {
          focus: "series"
        },
        animationDelay(idx: number) {
          return idx * 10 + 100;
        }
      }
    ],
    animationEasing: "elasticOut",
    animationDelayUpdate(idx: number) {
      return idx * 5;
    }
  };
}

/**
 * 柱状图数据结构
 *
 * @export
 * @param {boolean} [isMonth=false]
 * @returns {*}
 */
export function getColumnChartDataSet(isMonth = false) {
  if (isMonth) {
    return {
      color: getChartListColor(),
      legend: {
        left: "center",
        top: "10%",
        orient: "horizontal", // legend 横向布局。
        data: ["直接访问"]
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
      },
      xAxis: [
        {
          type: "category",
          data: ["1", "4", "8", "12", "16", "20", "24"],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: "value"
        }
      ],
      series: [
        {
          name: "直接访问",
          type: "bar",
          barWidth: "60%",
          data: [
            getRandomArray(Math.random() * 100),
            getRandomArray(Math.random() * 200),
            getRandomArray(Math.random() * 300),
            getRandomArray(Math.random() * 400),
            getRandomArray(Math.random() * 500),
            getRandomArray(Math.random() * 600),
            getRandomArray(Math.random() * 700)
          ]
        }
      ]
    };
  }

  return {
    color: getChartListColor(),
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    legend: {
      left: "center",
      bottom: "0%",
      orient: "horizontal", // legend 横向布局。
      data: ["直接访问"]
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "13%",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: "value"
      }
    ],
    series: [
      {
        name: "直接访问",
        type: "bar",
        barWidth: "20%",
        data: [
          getRandomArray(Math.random() * 100),
          getRandomArray(Math.random() * 200),
          getRandomArray(Math.random() * 300),
          getRandomArray(Math.random() * 400),
          getRandomArray(Math.random() * 500),
          getRandomArray(Math.random() * 600),
          getRandomArray(Math.random() * 700)
        ]
      }
    ]
  };
}

export function getPieChartDataSet({
  radius = 42,
  textColor,
  placeholderColor,
  containerColor
}: { radius: number } & Record<string, string>) {
  return {
    color: getChartListColor(),
    tooltip: {
      show: false,
      trigger: "axis",
      position: null
    },
    grid: {
      top: "0",
      right: "0"
    },
    legend: {
      selectedMode: false,
      itemWidth: 12,
      itemHeight: 4,
      textStyle: {
        fontSize: 12,
        color: placeholderColor
      },
      left: "center",
      bottom: "0",
      orient: "horizontal" // legend 横向布局。
    },
    series: [
      {
        name: "销售渠道",
        type: "pie",
        radius: ["48%", "60%"],
        avoidLabelOverlap: true,
        selectedMode: true,
        hoverAnimation: true,
        silent: true,
        itemStyle: {
          borderColor: containerColor,
          borderWidth: 1
        },
        label: {
          show: true,
          position: "center",
          formatter: ["{value|{d}%}", "{name|{b}渠道占比}"].join("\n"),
          rich: {
            value: {
              color: textColor,
              fontSize: 28,
              fontWeight: "normal",
              lineHeight: 46
            },
            name: {
              color: "#909399",
              fontSize: 12,
              lineHeight: 14
            }
          }
        },
        emphasis: {
          label: {
            show: true,
            formatter: ["{value|{d}%}", "{name|{b}渠道占比}"].join("\n"),
            rich: {
              value: {
                color: textColor,
                fontSize: 28,
                fontWeight: "normal",
                lineHeight: 46
              },
              name: {
                color: "#909399",
                fontSize: 14,
                lineHeight: 14
              }
            }
          }
        },
        labelLine: {
          show: false
        },
        data: [
          {
            value: 1048,
            name: "线上"
          },
          { value: radius * 7, name: "门店" }
        ]
      }
    ]
  };
}